feat(badges): use preferences graphql api

1 files changed, 28 insertions, 28 deletions

diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index c4d48454..f17bb790 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -2,11 +2,10 @@
 	import AWC from './../../../../lib/User/BadgeWall/AWC.svelte';
 	import { userIdentity } from '$lib/Data/AniList/identity';
 	import { user, type User } from '$lib/Data/AniList/user';
-	import type { Badge } from '$lib/Database/SB/User/badges';
+	import type { Badge } from '../../../../graphql/$types';
 	import { onDestroy, onMount } from 'svelte';
 	import HeadTitle from '$lib/Home/HeadTitle.svelte';
 	import { databaseTimeToDate, dateToInputTime, inputTimeToDatabaseTime } from '$lib/Utility/time';
-	import root from '$lib/Utility/root';
 	import proxy from '$lib/Utility/proxy';
 	import locale from '$stores/locale';
 	import Skeleton from '$lib/Loading/Skeleton.svelte';
@@ -17,7 +16,6 @@
 	import SettingHint from '$lib/Settings/SettingHint.svelte';
 	import Popup from '$lib/Layout/Popup.svelte';
 	import { page } from '$app/stores';
-	import type { UserPreferences } from '$lib/Database/SB/User/preferences';
 	import { browser } from '$app/environment';
 	import BadgePreview from '$lib/User/BadgeWall/BadgePreview.svelte';
 	import authorisedJson from '$lib/Data/Static/authorised.json';
@@ -26,10 +24,34 @@
 	import Badges from '$lib/User/BadgeWall/Badges.svelte';
 	import type { IndexedBadge } from '$lib/User/BadgeWall/badge';
 	import { graphql } from '$houdini';
+	import type { Preferences } from '../../../../graphql/user/$types';
 
 	export let data;
 
-	$: ({ UserBadges } = data);
+	$: ({ BadgeWallUser } = data);
+	$: preferences = $BadgeWallUser.fetching
+		? undefined
+		: ($BadgeWallUser.data?.User.preferences as Preferences);
+
+	$: if (browser && preferences && preferences.badge_wall_css) {
+		const sanitise = (css: string) =>
+			css
+				.replace(/\/\*[\s\S]*?\*\//g, '')
+				.replace(/<\/?[^>]+(>|$)/g, '')
+				.replace(
+					/(expression|javascript|vbscript|onerror|onload|onclick|onmouseover|onmouseout|onmouseup|onmousedown|onkeydown|onkeyup|onkeypress|onblur|onfocus|onsubmit|onreset|onselect|onchange|ondblclick):/gi,
+					''
+				)
+				.replace(/(behaviour|behavior|moz-binding|content):/gi, '')
+				.replace(/\s+/g, ' ')
+				.trim();
+		const style = document.createElement('style');
+
+		style.dataset.badgeWall = 'true';
+		style.innerHTML = sanitise(preferences.badge_wall_css);
+
+		document.head.appendChild(style);
+	}
 
 	const updateBadgeQuery = graphql(`
 		mutation UpdateBadge(
@@ -157,7 +179,6 @@
 	let badger: Partial<User>;
 	let migrateMode = false;
 	let hideMode = false;
-	let preferences: UserPreferences;
 	const authorised = authorisedJson.includes($identity.id);
 	let noticeDismissed = false;
 
@@ -189,27 +210,6 @@
 		}
 
 		awcPromise = fetch(proxy(`https://awc.moe/challenger/${badger.name}`));
-		preferences = await (await fetch(root(`/api/preferences?id=${badger.id}`))).json();
-
-		if (preferences && preferences.badge_wall_css) {
-			const sanitise = (css: string) =>
-				css
-					.replace(/\/\*[\s\S]*?\*\//g, '')
-					.replace(/<\/?[^>]+(>|$)/g, '')
-					.replace(
-						/(expression|javascript|vbscript|onerror|onload|onclick|onmouseover|onmouseout|onmouseup|onmousedown|onkeydown|onkeyup|onkeypress|onblur|onfocus|onsubmit|onreset|onselect|onchange|ondblclick):/gi,
-						''
-					)
-					.replace(/(behaviour|behavior|moz-binding|content):/gi, '')
-					.replace(/\s+/g, ' ')
-					.trim();
-			const style = document.createElement('style');
-
-			style.dataset.badgeWall = 'true';
-			style.innerHTML = sanitise(preferences.badge_wall_css);
-
-			document.head.appendChild(style);
-		}
 
 		if (data.user && !isId) {
 			currentUserIdentity = userIdentity(data.user);
@@ -561,12 +561,12 @@
 	{:then identity}
 		{@const isOwner = identity && (isId ? identity.id : identity.name) === data.username}
 
-		{#if $UserBadges.fetching || !$UserBadges.data}
+		{#if $BadgeWallUser.fetching || !$BadgeWallUser.data}
 			<Message message="Loading badges ..." />
 
 			<Skeleton grid={true} count={100} width="150px" height="170px" />
 		{:else}
-			{@const ungroupedBadges = castBadgesToIndexedBadges($UserBadges.data.User.badges)}
+			{@const ungroupedBadges = castBadgesToIndexedBadges($BadgeWallUser.data.User.badges)}
 			{@const isBadgeSelected =
 				selectedBadge &&
 				selectedBadge !== undefined &&